<template>
<!--  页面最大的盒子-->
  <div class="role-all">
    <!--    头部最大盒子-->
    <el-row class="search">
      <div style="display: flex;line-height: 60px;">
        <!--        头部图片最大的盒子-->
        <div class="icons">
          <!--          权限图片-->
          <i class="iconfont icon-quanxian"></i>
        </div>
        <!--        头部标题-->
        <span class="icone">角色管理</span>
      </div>
    </el-row>
<!--    页面上方最大盒子-->

<!--    页面下方最大盒子-->
    <div class="bottom-all">
<!--      下方上方按钮-->
      <div class="button-all">
        <!--            下方按钮大盒子-->
        <el-row class="iconfont-all">
          <!--              按钮小盒子-->
          <el-button class="iconfont-one" type="primary"  @click="insertRole"><i class="iconfont icon-xinzeng"></i>新增</el-button>

        </el-row>
      </div>

<!--      下方表格-->
      <div>
        <el-table
            class="table-one"
            ref="multipleTableRef"
            :data="d.tableData"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
                                fontWeight:'normal',
                                fontSize:'14px',
                                color:'#909399',
                                background:'#EFF3F8',
                              }"
        >
          <el-table-column label="角色编号" property="id" width="120"/>
          <el-table-column label="角色名称" property="name" width="120" />
          <el-table-column label="限制字符" property="roleKey" width="120" />
<!--          <el-table-column label="显示顺序" property="address1" width="120"/>-->
          <el-table-column label="用户状态" property="status" width="120" >

            <template #default="scope">
              <el-switch v-model="scope.row.delFlag"
                         :active-value="0"
                         :inactive-value="1">
              </el-switch>

            </template>
          </el-table-column>
          <el-table-column property="remark" label="备注" width="260"/>
          <el-table-column property="address5" label="操作" width="">
            <template #default="scope">
              <div style="display: flex">
                <!--                      右下方表格里面的按钮---大表格的按钮-->
                <el-button class="table-buttom" type="primary" @click="updataRole(scope.row.id)"><i class="iconfont icon-tianxie"></i>编辑</el-button>
                <el-button class="table-buttom" type="success"><i class="iconfont icon-shanchu2"></i>删除</el-button>
              </div>
            </template>

          </el-table-column>

        </el-table>
        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
          </el-col>
        </el-row>
      </div>

    </div>



    </div>

<RoleCompile :ComplieRoleData="complieRoleData"></RoleCompile>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
// 上方搜索、重置按钮
import {
  Check,
  Delete,
  Edit,
  Message,
  Star,
} from '@element-plus/icons-vue'
import axios from "axios";
import RoleCompile from "../system/systemVue/RoleCompile.vue"
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData: [],
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
onMounted(()=>{
  //请求所有角色
  // #shujuyuan
  const url = "http://localhost:1688/sysUser/allRole"
  axios.get(url).then((data)=>{
    var data2=data.data.data
    ALltableData.value = data2;//放入表格
    d.total = data.data.data.length;//获得它的长度
    getTabelData();//调用方法
  })
})
//给子组件传值
const complieRoleData=reactive({
      transition:0, //默认新增  1 修改
      dialogVisible:false,
      role:{
        name:"",
        roleKey:"",
        remark:"",
      },
      menu:[]
    }
)
const insertRole = ()=>{
  complieRoleData.transition = 0;
  complieRoleData.role={
    name:"",
    roleKey:"",
    remark:"",
  }
  complieRoleData.menu =[]
  complieRoleData.dialogVisible = true;

}
const updataRole =(id)=>{
  complieRoleData.transition = 1;
  axios.get(`http://localhost:1688/role/sysRole/${id}`).then((data)=>{
    complieRoleData.role =data.data.data
  })
  axios.get(`http://localhost:1688/role/sysRoleIdMenu/${id}`).then(data=>{
    complieRoleData.menu =data.data.data
    console.log(data.data.data,'menu')
  })
  complieRoleData.dialogVisible = true;
}
// 右上方的用户状态
const value = ref('Option1')
// 右上方的用户状态


</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");
    /*全局*/
    *{
      padding: 0px;
      margin: 0px;
    }
    /*页面最大盒子*/
    .system-all{
      height: 100%;
    }
    /*头部最大盒子*/
    .search{
      border: 1px solid silver;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }
    .el-row{
      padding: 5px 0px;
    }

    /deep/ .el-tabs__header {
      margin-bottom: 0px;
    }
    /*头部图片最大的盒子*/
    .icons{
      width: 50px;
      height: 50px;
      background: dodgerblue;
      text-align: center;
      line-height: 50px;
      /*圆角*/
      border-radius: 40px;
      margin-left: 20px;
    }
    /*权限图片*/
    .icon-quanxian {
      color: white;
      font-size: 24px;
      line-height: 50px;
    }
    /*头部标题*/
    .icone{
      padding-left: 15px;
      line-height: 50px;
    }
    /*页面上方最大盒子*/
    .top-all{
      width: 100%;
      height: 60px;
      line-height: 60px;
    }
    /*上方内容盒子*/
    .top-one{
      line-height: 30px;
      display: flex;
      padding: 10px 0px;
      border-left:1px solid silver ;
      border-right: 1px solid silver;
    }
    /*上面的文字*/
    .li-all{
      font-size: 14px;
      width: 240px;
      height: 30px;
      text-align: center;
      padding-left: 15px;
      margin-top: 5px;
    }
    /*上面的文字*/
    .li-all-one{
      font-size: 14px;
      width: 240px;
      height: 30px;
      text-align: center;
      margin-top: 5px;
    }
    /*上面的input输入框*/
    .input-all{
      height: 30px;
      border: 1px solid silver;
      width: 160px;
      border-radius: 4px;
    }
    /*上方选择框*/
    .m-2{
      width: 160px;
      height: 30px;
      margin-bottom: 5px;
    }
    /*上方---创建时间*/
    .time-all{
      line-height: 40px;
      font-size: 14px;
    }
    /*头部上方时间选择器*/
    .li-all-one-one{
      line-height: 40px;
    }
    /*上方搜索、重置按钮*/
    .button-one{
      margin-left: 10px;
    }
    /*上方横杠*/
    .henggang{
      padding-right: 5px;
      line-height: 40px;
    }
    /*页面下方最大盒子*/
    .bottom-all{
        border: 1px solid silver;
        height: 540px;
    }
    /*右下方按钮最大盒子*/
    .button-all{
      padding-left: 17px;
      border-bottom:1px solid silver ;
    }
    /*右下方按钮大盒子*/
    .iconfont-all{
      padding-top: 10px;
    }
    /*按钮小盒子*/
    .iconfont-one{
      padding: 10px;
    }
    /*右下方表格里面的按钮*/
    .table-buttom{
      padding: 0px 10px;
    }



</style>